import { Color3, Engine, FreeCamera, Vector3, Mesh, Scene, ArcRotateCamera, PointLight, StandardMaterial, Texture } from 'babylonjs'

// 材质 贴图
export class Demo2 {
  private dom: HTMLCanvasElement
  private engine: Engine
  private scene: Scene
  private camera: ArcRotateCamera

  constructor(dom: HTMLCanvasElement) {
    this.dom = dom
    this.engine = new Engine(this.dom, true)  // 设置引擎
    this.scene = new Scene(this.engine)   // 创建场景
    this.camera = new ArcRotateCamera("Camera", Math.PI / 2, 1.0, 110, Vector3.Zero(), this.scene);; // 创建相机
    this.camera.attachControl(this.dom, false)  // 把相机放到画布

    const light = new PointLight("Omni", new Vector3(-60, 60, 80), this.scene); // 点光

    const sphere1 = Mesh.CreateSphere('sphere1', 10, 9, this.scene) // 创建球
    const sphere2 = Mesh.CreateSphere('sphere2', 10, 9, this.scene) // 创建球
    sphere2.position.set(15, 0, 0)
    const sphere3 = Mesh.CreateSphere('sphere3', 10, 9, this.scene) // 创建球
    sphere3.position.set(30, 0, 0)
    // const sphere4 = Mesh.CreateSphere('sphere4', 10, 9, this.scene) // 创建球
    // sphere4.position.set(45, 0, 0)

    // 创建地板
    const plane = Mesh.CreatePlane('plane', 120, this.scene)
    plane.position.y = -5;
    plane.rotation.x = Math.PI / 2;


    // 材质1  网格
    const mt = new StandardMaterial('st1', this.scene)
    mt.wireframe = true  // 线框类型的材质
    sphere1.material = mt

    // 材质2  透明
    const mt2 = new StandardMaterial('st2', this.scene)
    mt2.diffuseColor = new Color3(1, 0, 0)   // 材质的贴图为红色
    mt2.alpha = 0.3  // 材质的透明度为0.3
    sphere2.material = mt2


    // 材质3  贴图
    const mt3 = new StandardMaterial('st3', this.scene)
    mt3.diffuseTexture = new Texture('/1.jpg', this.scene)
    sphere3.material = mt3


    // // 材质4 改变贴图位置
    // const mt4 = new StandardMaterial('st3', this.scene)
    // mt4.diffuseTexture = new Texture('/1.jpg', this.scene)
    // sphere4.material = mt4


    window.addEventListener('resize', () => {
      this.engine.resize();
    })
  }

  render() {
    // 引擎渲染场景
    this.engine.runRenderLoop(() => {
      this.scene.render()
    })
  }




}


